<script src="./script.js"></script>
<template>
  <div class="app-container">

    <div class="filter-container">
      <el-input v-model="listQuery.keyword" placeholder="微信昵称 | 认证名称 | 联系人 | 联系电话" clearable style="width: 300px;" class="filter-item" @input="handleSearch" />
      <el-select v-model="listQuery.salesman" placeholder="关联业务员" class="filter-item" style="width: 130px" @change="handleSearch">
        <el-option v-for="item in sales_options" :key="item.value" :label="item.label" :value="item.value" />
      </el-select>

      <el-select v-model="from_salesman" placeholder="原来业务员" class="filter-item" style="width: 130px;margin-left:20px" >
        <el-option v-for="item in sales_options" :key="item.value" :label="item.label" :value="item.value" />
      </el-select>

      <el-select v-model="to_salesman" placeholder="转移业务员" class="filter-item" style="width: 130px">
        <el-option v-for="item in sales_options" :key="item.value" :label="item.label" :value="item.value" />
      </el-select>

      <el-button class="filter-item" style="margin-left: 10px;" type="success" @click="transfer">批量转移</el-button>

    </div>

    <el-table
      v-loading="listLoading"
      :data="list"
      border
      size="mini"
      fit
      highlight-current-row
      style="width: 100%;"
    >
      <el-table-column label="ID" prop="id" align="center" width="100">
        <template slot-scope="{row}">
          <span>{{ row.id }}</span>
        </template>
      </el-table-column>
      <el-table-column label="OPEN ID" prop="id" align="center" width="100">
        <template slot-scope="{row}">
          <span>{{ row.profile.open_id }}</span>
        </template>
      </el-table-column>
      <el-table-column label="微信">
        <template slot-scope="{row}">
          <el-image
            style="width: 40px; height: 40px;"
            :src="row.profile.avatar_url !== '' ? row.profile.avatar_url : 'https://cdn.west.qianqianying.com/mph/user.jpg'"
          />
          <div>
            <el-link type="danger" v-if="row.is_member">{{ row.profile.nickname }}</el-link>
            <el-link type="info" v-if="!row.is_member">{{ row.profile.nickname }}</el-link>
            <el-link type="info" v-if="row.profile.nickname === '' || row.profile.nickname === '微信用户'">用户未授权</el-link>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="联系人" width="140px">
        <template slot-scope="{row}">
          <div v-if="row.enrollment && row.enrollment.state==='ACCEPTED'">
            <div>{{ row.enrollment.address.consignee }}</div>
            <div>{{ row.enrollment.address.mobile }}</div>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="认证信息" width="150">
        <template slot-scope="{row}">
          <div v-if="row.enrollment && row.enrollment.state==='ACCEPTED'">
            <div>{{ row.enrollment.name }}</div>
            <div><el-link type="danger">{{ row.enrollment.address.district }}</el-link></div>
          </div>
        </template>
      </el-table-column>

      <el-table-column label="信用额度" width="70">
        <template slot-scope="{row}">
          {{ row.credit }}
        </template>
      </el-table-column>

      <el-table-column label="会员有效期" width="120">
        <template slot-scope="{row}">
          <div v-if="row.is_experienced"><el-tag size="mini" type="">已体验</el-tag></div>
          <div v-if="row.member_expired_at">{{ row.member_expired_at | parseTime('{y}年{m}月{d}日 {h}:{i}:{s}') }}</div>
          <div v-if="row.member_expired_at && !row.is_member"><el-tag effect="dark" size="mini" type="danger">已过期</el-tag></div>
        </template>
      </el-table-column>
      <el-table-column label="注册时间" align="center" width="120">
        <template slot-scope="{row}">
          {{ row.created_at | parseTime('{y}年{m}月{d}日 {h}:{i}:{s}') }}
        </template>
      </el-table-column>
      <el-table-column label="邀请人" width="140">
        <template slot-scope="{row}">
          <div v-if="row.inviter && !row.inviter.is_salesman">
            <el-image
              style="width: 40px; height: 40px;"
              :src="row.inviter.profile.avatar_url"
            />
            <div>{{ row.inviter.profile.nickname }}</div>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="业务员" width="140">
        <template slot-scope="{row}">
          <div v-if="row.inviter && row.inviter.is_salesman">
            <el-image
              style="width: 40px; height: 40px;"
              :src="row.inviter.profile.avatar_url"
            />
            <div><el-link type="primary">{{ row.inviter.profile.nickname }}</el-link></div>
          </div>

          <div v-if="row.indirect_inviter && row.indirect_inviter.is_salesman">
            <el-image
              style="width: 40px; height: 40px;"
              :src="row.indirect_inviter.profile.avatar_url"
            />
            <div><el-link type="danger">{{ row.indirect_inviter.profile.nickname }}</el-link></div>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="业务员授权" width="150">
        <template slot-scope="{row}">
          <div style="margin-bottom:5px;">
            <el-popconfirm
              v-if="!row.is_salesman"
              confirm-button-text='确定'
              cancel-button-text='取消'
              icon="el-icon-info"
              icon-color="red"
              title="是否确定授权吗？"
              @onConfirm="addSalesman(row.id)"
            >
              <el-button slot="reference">授权业务员</el-button>
            </el-popconfirm>
            <el-popconfirm
              v-if="row.is_salesman"
              confirm-button-text='确定'
              cancel-button-text='取消'
              icon="el-icon-info"
              icon-color="red"
              title="是否确定取消授权吗？"
              @onConfirm="removeSalesman(row.id)"
            >
              <el-button type="danger" slot="reference">取消业务员</el-button>
            </el-popconfirm>
          </div>
        </template>
      </el-table-column>

      <el-table-column label="备注" width="120">
        <template slot-scope="{row}">
          {{ row.note }}
        </template>
      </el-table-column>

      <el-table-column label="操作" width="150">
        <template slot-scope="{row}">
          <div style="margin-bottom:5px;">
            <el-button size="mini" type="primary" @click="preTransfer(row.id)">转移</el-button>
            <el-button size="mini" type="info" @click="preUpdateAddress(row.id)">地址</el-button>

          </div>
          <div style="margin-bottom:5px;">
            <el-button size="mini" type="warming" @click="preUpdateNote(row)">备注</el-button>
          </div>

        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />

    <el-dialog
      title="请选择业务员"
      :visible.sync="dialogVisible"
      width="30%">
      <div style="margin-bottom: 10px">转移业务关系尽量在早期，否则可能出现历史业绩关联混乱！！！</div>
      <span>
        <el-select v-model="salesman" placeholder="关联业务员" class="filter-item" style="width:100%">
          <el-option v-for="item in sales_options" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleTransfer">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog
      title="请选择会员到期时间"
      :visible.sync="memberVisible"
      width="30%">
      <div style="margin-bottom: 10px">重置会员到期时间会同时重置用户未使用优惠券过期时间为统一时间！！！</div>
      <span>
        <el-date-picker
            v-model="expired_at"
            value-format="yyyy-MM-dd"
            type="date"
            placeholder="选择日期">
        </el-date-picker>
      </span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="memberVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleResetExpiredAt">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog title="修改收货地址" :visible.sync="addressVisible">
      <el-form ref="addressForm" :model="addressFormData" :rules="rules" size="medium" label-width="100px">
        <el-form-item label="联系人" prop="consignee">
          <el-input v-model="addressFormData.consignee" placeholder="请输入联系人姓名" clearable></el-input>
        </el-form-item>
        <el-form-item label="联系人" prop="mobile">
          <el-input v-model="addressFormData.mobile" placeholder="请输入联系人手机号码" clearable></el-input>
        </el-form-item>

        <el-form-item label="地区">
          <el-cascader
            placeholder="请选择地区"
            v-model="selected_area"
            :options="area_options"
            @change="onSelectedArea"
            filterable>
          </el-cascader>
        </el-form-item>

        <el-form-item label="详细地址" prop="address">
          <el-input v-model="addressFormData.address" placeholder="请输入联系人姓名" clearable></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="addressVisible = false">取消</el-button>
        <el-button type="primary" @click="updateAddress">修改</el-button>
      </div>
    </el-dialog>

    <el-dialog @close="closeNoteForm" title="修改备注" :visible.sync="noteVisible">
      <el-row :gutter="15">
        <el-form ref="noteForm" :model="noteForm" size="medium" label-width="100px">
          <el-col :span="16">
            <el-row>
              <el-col :span="16">
                <el-form-item label="备注" prop="note">
                  <el-input v-model="noteForm.note" placeholder="请输入用户备注" clearable :style="{width: '100%'}">
                  </el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-col>
        </el-form>
      </el-row>
      <div slot="footer">
        <el-button @click="closeNoteForm">取消</el-button>
        <el-button type="primary" @click="updateNote">确定</el-button>
      </div>
    </el-dialog>

  </div>
</template>
<style>
</style>

